<template>
  <div class="grammarsView">
    <div class="returnButton">
      <el-button type="primary" @click="gotoBack()" icon="ArrowLeft"
        >返回</el-button
      >
    </div>
    <div class="grammarsViewContent">
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column
          prop="grammar"
          label="语法"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="example"
          label="例子或简略介绍"
          width="auto"
        ></el-table-column>
        <el-table-column
          sortable
          prop="proficiency"
          label="熟练度"
          width="100"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { httpClient } from "@/libs/http-client";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const tableData = ref([]);

// 获取数据
const getGrammars = () => {
  httpClient.get("/grammars/getGrammars").then((data) => {
    console.log(data);
    const records = data.records;
    records.forEach((grammar) => {
      tableData.value.push({
        grammar: grammar.grammar,
        example: grammar.example,
        proficiency: grammar.proficiency,
      });
    });
  });
};

onMounted(() => {
  getGrammars();
});

const gotoBack = () => {
  router.go(-1);
};
</script>

<style>
.grammarsView {
  width: 100%;
  height: 100%;
}

.grammarsViewContent {
  height: 100%;
  margin: 20px;
}

.returnButton {
  margin: 20px;
}
</style>
